import React, { memo, useState, useEffect } from 'react'
import axios from 'axios'
import styles from './app.module.scss'
import { Table, Radio } from 'antd';
import { StarOutlined } from '@ant-design/icons'
import ProjectStatus from './components/projectStatus'
import Cards from './pages/cards'
const App = memo(() => {
  const [nav, setNav] = useState('cards')
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    
    axios.get('http://localhost:3001/data1').then((res) => {
      
      setDataSource(res.data)
    })
  }, [])
  const columns = [
    {
      title: '所属品类',
      dataIndex: 'productCategory',
      key: 'productCategory',
      render: (value) => {
        return <span>
          <StarOutlined></StarOutlined>{value}</span>
      }
    },
    {
      title: '项目类别',
      dataIndex: 'prjCategory',
      key: 'projectType',
    },
    {
      title: '项目编号',
      dataIndex: 'projectNum',
      key: 'projectNum',
    },
    {
      title: '项目名称',
      dataIndex: 'prjName',
      key: 'prjName',
    },
    {
      title: '项目状态',
      dataIndex: 'projectStatus',
      key: 'projectStatus',
      render: (value) => {
        return <ProjectStatus value={value}></ProjectStatus>

      }
    },
    {
      title: '项目经理',
      dataIndex: 'prjManager',
      key: 'prjManager',
    },
    {
      title: '所属部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '项目计划时间',
      dataIndex: 'prjStartDate',
      key: 'prjStartDate',
    },
  ];
  const handleSizeChange = (e) => {

    setNav(e.target.value)

  }
  return (
    <div className={styles.root}>
      <div className='nav'>
        <Radio.Group value={nav} onChange={(e) => handleSizeChange(e)}>
          <Radio.Button value="cards">卡片</Radio.Button>
          <Radio.Button value="lists">列表</Radio.Button>
        </Radio.Group>
      </div>

      <div className='content'>
        {
          nav === 'cards' ? <Cards data={dataSource}></Cards> : <Table pagination={false} columns={columns} dataSource={dataSource} rowKey={record => record.guid} bordered></Table>
        }


      </div>

    </div>
  )
})

export default App